<template>
  <div style="color: #a8c5ed;">
    <div class="bgy-screen-top">

      <div class="top-left">
        <div class="top-logo"></div>
        <div class="bgy-line left" style="margin-top: 27px"></div>
        <div class="top-quit" @click="back">
          <i class="iconfont icon-back pointer"></i>
        </div>
        <p class="top-name">
          <span class="top-name-span" :title="$route.query.name">{{$route.query.name}}</span>
        </p>
      </div>

      <div class="top-center relative">
        <div class="top-title"></div>
        <div class="top-light"></div>
      </div>

      <div class="top-right">
        <span class="top-time">{{time}}</span>

        <zz-retrieve
          class="mr20"
          :leftBorder = true
          :left="-204"
          :isStopClick = true
          :isProject = true
          isAi="1"
          @clickProject="clickProject"
          ref="retrieveIndex"
          :height="372"
          :stage="loginType === 'projectLogin'"
          :isVideoRouter="loginType === 'projectLogin'"
          fontSize="24px"
          style="margin-left: -5px; line-height: 20px;"
        ></zz-retrieve>

        <zz-history isAi="1" @choose="enterHistoryProjects" class="mr20"></zz-history>

        <span class="relative t-left" v-if="isFullScreen">
          <i class="iconfont icon-daquanping pointer" style="font-size: 22px" @click="fullScreen"></i>
        </span>

        <span class="relative t-left" v-else>
          <i class="iconfont icon-tuiquanping pointer"  style="font-size: 22px" @click="exitScreen"></i>
        </span>

      </div>
    </div>

    <div style="padding: 10px 20px 20px 20px">
      <div class="ai-video-top">
        <div class="video-top-left">
          <zz-frame
            backgroundImage="/static/images/bgy-gaikuang.png"
            backgroundSize="215px"
            width="100%" height="100%">
            <info></info>
          </zz-frame>
        </div>
        <div class="video-top-center">
          <zz-frame width="100%" height="100%">
            <monitor></monitor>
          </zz-frame>
        </div>
        <div class="video-top-right">
          <zz-frame width="100%" height="100%">
            <div class="relative">
              <p class="absolute right-time">近30天：{{beforeToday}}~{{today}}</p>
            </div>
            <div class="until_title">智能监测统计分析</div>
            <div class="left" style="width: 49%">
              <p class="statistics-title">违规行为监测</p>
              <div v-show="warnSourceList.length > 0">
                <div ref="warningType" style="width: 100%; height: 160px; margin: 0 auto;"></div>
                <p class="t-center">预警类型统计</p>
                <div ref="warningSource" style="width: 100%; height: 160px; margin: 10px auto 0 auto;"></div>
                <p class="t-center">预警来源分布</p>
              </div>
              <div class="t-center" v-show="warnSourceList.length === 0">
                <p class="icon-anquan-warn"><i class="iconfont icon-anquan"></i></p>
                <p>本项目管理很到位，近30天未监控到违规行为</p>
              </div>
            </div>
            <div class="left ai-line"></div>
            <div class="left clear" style="width: 47%">
              <p class="statistics-title">火情监测</p>
              <fire></fire>
            </div>
          </zz-frame>
        </div>
      </div>

      <div class="ai-video-bottom" :style="{height: `${contentHeight}px`}">
        <zz-frame width="100%" height="100%" class="relative" style="overflow: hidden">
          <div class="until_title">智能抓拍记录</div>
          <div class="button-type">
            <button class="button-common" :class="{'button-all': type === ''}" @click="chooseType('')">全部<span v-if="length[0]">({{length[0]}})</span></button>
            <div class="button-bgy-line"></div>
            <button class="button-police">报警</button>
            <button class="button-common" @click="chooseType(3)" :class="{'button-all': type === 3}">烟感<span :class="{'nodeColor': nodeType === 3}" v-if="length[3]">({{length[3]}})</span></button>
            <button class="button-common" @click="chooseType(2)" :class="{'button-all': type === 2}">明火<span :class="{'nodeColor': nodeType === 2}" v-if="length[2]">({{length[2]}})</span></button>
            <div class="button-bgy-line"></div>
            <button class="button-warning">预警</button>
            <button class="button-common" @click="chooseType(1)" :class="{'button-all': type === 1}">安全帽<span :class="{'nodeColorWarning': nodeType === 1}" v-if="length[1]">({{length[1]}})</span></button>
            <button class="button-common" @click="chooseType(6)" :class="{'button-all': type === 6}">物品<span :class="{'nodeColorWarning': nodeType === 6}" v-if="length[6]">({{length[6]}})</span></button>
            <button class="button-common" @click="chooseType(4)" :class="{'button-all': type === 4}">闯入<span :class="{'nodeColorWarning': nodeType === 4}" v-if="length[4]">({{length[4]}})</span></button>
            <button class="button-common" @click="chooseType(5)" :class="{'button-all': type === 5}">人员聚集<span :class="{'nodeColorWarning': nodeType === 5}" v-if="length[5]">({{length[5]}})</span></button>
          </div>
          <zz-select
            style="right: 20px; top: 10px; position:absolute; color: #00e8ff;"
            :option="timeList"
            name="近7天"
            background="none"
            optionBackground="rgba(10, 57, 79, 0.9)"
            :options="{width: '60px'}"
            iconPosition="left"
            :isArrowRight = false
            @optionClick="timeCallback">
          </zz-select>
          <div class="video-list" :style="{height: `${contentHeight - 80}px`}" v-show="videoSourceFirst.catchId">
            <div class="video-list-left left">
              <zz-preview :isFilling="true" v-if="videoSourceFirst && videoSourceFirst.files" :item="videoSourceFirst.files" width="680px" :height="`${contentHeight - 81}px`" :th="1"></zz-preview>
              <div class="video-control">【{{videoSourceFirst.deviceVideoName}}-{{videoSourceFirst.typeName}}{{videoSourceFirst.timeStr}}】</div>
            </div>
            <div
              @mouseenter="visible = true"
              @mouseleave="visible = false"
              class="video-list-right left relative"
              ref="videoLisRight"
              :style="{width: `${contentWidth}px`}">

              <div
                class="absolute video-transition"
                ref="videoScrollContent"
                style="top: 0; height: 100%"
                :style="{
                    transform: `translateX(${translateX}px)`,
                    msTransform: `translateX(${translateX}px)`,
                    }">
                <div v-for="item in videoList" class="video-list">
                  <div v-for="(child, index) in item" class="child-img relative" :class="{'child-img-top': index === 1}" :style="{height: `${contentListHeight / 2 - 45}px`}">
                    <zz-preview v-if="child.files" :item="child.files" :isFilling="true" width="330px" :height="`${contentListHeight / 2 - 45}px`" :th="1"></zz-preview>
                    <div class="video-control" :title="`【${videoSourceFirst.deviceVideoName}-${videoSourceFirst.typeName}${videoSourceFirst.timeStr}}】`">【{{child.deviceVideoName}}-{{child.typeName}}{{child.timeStr}}】</div>
                  </div>
                </div>

                <!--<div class="video-list v-top" :style="{height: `${contentListHeight- 45}px`, lineHeight: `${contentListHeight- 45}px`}">已经没有数据了</div>-->
              </div>

              <div class="video-marquee-left" v-show="visible && this.pages > 1">
                <div class="video-marquee-bg" @click="routeLeft">
                  <i class="iconfont icon-t-arrow video-icon"></i>
                </div>
              </div>
              <div class="video-marquee-right" v-show="visible && this.pages > 1">
                <div class="video-marquee-bg" @click="routeRight">
                  <i class="iconfont icon-r-arrow video-icon"></i>
                </div>
              </div>
            </div>
          </div>
          <p class="video-list-p" v-show="showNone" :style="{height: `${contentHeight - 80}px`, lineHeight: `${contentHeight - 80}px`,}">
            <i class="iconfont icon-anquan"></i>
             <span class="v-top">{{dayType}}{{catchType}}</span>
          </p>
        </zz-frame>
      </div>
    </div>
  </div>
</template>
<script>
  import warningSource from './statistics/warningSource.js'
  import warningType from './statistics/warningType.js'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        visible: false,
        time: '',
        translateX: 0,
        dayType: '近七日',
        contentHeight: 300,
        contentListHeight: 300,
        contentWidth: 200,
        loginType: '',
        isFullScreen: true,
        showNone: false,
        videoList: [],
        type: '',
        videoTime: 7,
        today: '',
        beforeToday: '',
        length: {
          '0': '',
          '1': '',
          '2': '',
          '3': '',
          '4': '',
          '5': '',
          '6': ''
        },
        scrollDownStatus: false,
        isLoading: false,
        allLength: 0,
        smokeLength: 0,
        helmetLength: 0,
        fireLength: 0,
        articleLength: 0,
        breakLength: 0,
        personLength: 0,
        warnSourceList: [],
        warnTypeList: [],
        timeList: {
          0: '今日',
          7: '近7天',
          30: '近30天'
        },
        videoSourceFirst: {},
        testObj: {},
        videoSourceList: [],
        videoSourceListCopy: [],
        targetLeft: 0,
        nodeType: 0,
        pages: 1,
        pageNum: 1,
        videoScrollLeft: 0,
        videoScrollContent: 0,
        clickLength: 0,
        queryDown: false,
        projectNode: null,
        catchType: '无违规及安全预警发生'
      }
    },
    mixins: [warningSource, warningType],
    computed: {
      ...mapGetters({
        video: 'getVideo',
        videoNode: 'getVideoNode',
        incomingAIVideoNode: 'incomingAIVideoNode',
        currentUser: 'currentUser'
      })
    },
    components: {
      info (resolve) {
        require(['./info.vue'], resolve)
      },
      monitor (resolve) {
        require(['./monitor.vue'], resolve)
      },
      fire (resolve) {
        require(['./statistics/fire.vue'], resolve)
      }
    },
    watch: {
      incomingAIVideoNode (item) {
        this.nodePush(item)
      },
      '$route' (to, from) {
        if (to.name === 'AIvideo') {
          this.projectNode.logout()
          setTimeout(() => {
            this.projectNode.setOption({
              group: `PROJECT_GROUP_${this.$route.query.pjId}`
            })
          }, 5000)
          this.reset()
          this.selWarnCount()
          this.selTypeCountBy()
          this.monitorVideoCatch()
        }
      }
    },
    mounted () {
      this.loginType = this.$local.get('login')
      this.setTime()
      this.setDay()
      this.setInHeight()
      this.selWarnCount()
      this.selTypeCountBy()
      this.monitorVideoCatch()
      this.projectNode = new this.$Node({
        group: `PROJECT_GROUP_${this.$route.query.pjId}`,
        mName: this.currentUser.mName
      })
    },
    beforeRouteLeave (to, from, next) {
      this.projectNode.logout()
      next()
    },
    methods: {
      setTime () {
        this.time = this.$moment().format('YYYY-MM-DD HH:mm,  ddd')
        setInterval(() => {
          this.time = this.$moment().format('YYYY-MM-DD HH:mm,  ddd')
        }, 1000)
      },
      setDay () {
        this.today = this.$moment().format('YYYY-MM-DD')
        this.beforeToday = this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
      },
      selWarnCount () {
        const data = {
          'projectId': this.$route.query.pjId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          closeSaveRequest: true,
          url: `${this.$site.videoServer}/api/monitorVideoCatch/selWarnCount`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.warnSourceList = res.data.data.warnSourceList
          this.warnTypeList = res.data.data.warnTypeList
          this.$nextTick(() => {
            this.initWarningSource()
            this.initWarningType()
          })
        })
      },
      monitorVideoCatch () {
        this.showNone = false
        const data = {
          'projectId': this.$route.query.pjId,
          'day': this.videoTime,
          'page': this.pageNum,
          'pageSize': 9,
          'type': this.type
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/monitorVideoCatch/selectPageListBy`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.isLoading = false
          this.pages = res.data.data.list.pages
          let list = res.data.data.list.dataList.map((item) => {
            item.files = {
              type: 1,
              fileUuid: item.picUrl
            }
            return item
          })
          if (list.length > 0) {
            if (this.pageNum === 1) {
              this.videoSourceList = list.filter((item, index) => index !== 0)
              this.videoSourceFirst = list[0]
            } else {
              this.videoSourceList = [...this.videoSourceList, ...list]
            }
            this.showNone = false
          } else {
            this.videoSourceList = []
            this.videoSourceFirst = {}
            this.showNone = true
          }
          this.initNodeList()
        })
      },
      selTypeCountBy () {
        const data = {
          'projectId': this.$route.query.pjId,
          'day': this.videoTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/monitorVideoCatch/selTypeCountBy`,
          data: this.$qs.stringify(data)
        }).then(res => {
          res.data.data.typeCounts.forEach(item => {
            this.length[item.id] = item.value
          })
        })
      },
      chooseType (type) {
        this.type = type
        this.reset()
        switch (type) {
          case 1:
            this.catchType = '无未戴安全帽预警发生'
            break
          case 2:
            this.catchType = '无明火报警发生'
            break
          case 3:
            this.catchType = '无烟感报警发生'
            break
          case 4:
            this.catchType = '无非法闯入预警发生'
            break
          case 5:
            this.catchType = '无人员聚集预警发生'
            break
          case 6:
            this.catchType = '无物品移动预警发生'
            break
          default:
            this.catchType = '无违规及安全预警发生'
            break

        }
        this.monitorVideoCatch()
      },
      timeCallback (item) {
        this.videoTime = item.key
        this.dayType = item.value
        this.reset()
        this.monitorVideoCatch()
        this.selTypeCountBy()
      },
      reset () {
        this.pageNum = 1
        this.nodeType = ''
        this.videoList = []
        this.queryDown = false
        this.translateX = 0
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      back () {
        this.$router.push({name: 'videoMap'})
      },
      setInHeight () {
        this.seHeight()
        window.addEventListener('resize', () => {
          this.seHeight()
        })
      },
      seHeight () {
        this.contentHeight = window.innerHeight - 595
        this.contentListHeight = window.innerHeight - 595
        this.contentWidth = window.innerWidth - 780
      },
      nodePush (item) {
        this.translateX = 0
        item.files = {
          type: 1,
          fileUuid: item.picUrl
        }
        const copyVideo = {...this.videoSourceFirst, ...{}}
        if (this.type === item.type) {
          this.videoSourceList.unshift(copyVideo)
          this.videoSourceFirst = item
          this.initNodeList()
        } else {
          this.nodeType = item.type
        }
        if (!this.type) {
          this.videoSourceList.unshift(copyVideo)
          this.videoSourceFirst = item
          this.initNodeList()
        }
        this.length[`${item.type}`]++
        this.length['0']++
        // this.selWarnCount()
      },
      initNodeList () {
        let list = []
        for (let i = 0, len = this.videoSourceList.length; i < len; i += 2) {
          list.push(this.videoSourceList.slice(i, i + 2))
        }
        this.videoList = list
        this.$nextTick(() => {
          let rectLisRight = this.$refs.videoLisRight.getBoundingClientRect()
          let rect = this.$refs.videoScrollContent.getBoundingClientRect()
          if (rect.width > rectLisRight.width) {
            this.scrollDownStatus = true
          } else {
            this.scrollDownStatus = false
          }
        })
      },
      clickProject (item) {
        this.$router.push({name: 'AIvideo', query: {pjId: item.projectId, name: item.projectTitle}})
      },
      enterHistoryProjects (item) {
        this.$router.push({name: 'AIvideo', query: {pjId: item.projectId, name: item.projectTitle}})
      },
      routeLeft () {
        if (this.translateX === 0) {
          return
        }
        this.translateX -= -1020
      },
      routeRight () {
        // 如果全部请求完成
        if (this.queryDown) {
          this.translateX += -1020
        } else {
          if (this.pageNum < this.pages) {
            this.pageNum++
            this.monitorVideoCatch()
            this.translateX += -1020
          } else if (this.pageNum === this.pages) {
            this.queryDown = true
            this.pageNum++
            this.translateX += -1020
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  html{
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .bgy-line{
    margin: 0 15px 0 15px;
    width: 1px;
    height: 35px;
    background-image: url("/static/images/line-duan.png");
  }
  .ai-line{
    width: 4%;
    height: 300px;
    margin: 30px 0 0 0;
    background-image: url("/static/images/line-long.png");
    background-repeat: no-repeat;
  }
  .ai-video-top{
   display: table;
   width: 100%;
    overflow: hidden;
   >div {
     display: table-cell;
     vertical-align: top;
     height: 460px;
     .icon-anquan-warn{
       margin: 80px 0 20px 0;
       i{
         font-size: 90px;
       }
     }
   }
   .video-top-left{
     width: 460px;
     padding-right: 10px;
   }
   .video-top-center{
     width: 460px;
     padding-right: 10px;
   }
   .video-top-right{
      .right-time{
        right: 0;
        top: 0;
      }
   }
 }
  .ai-video-bottom{
    margin-top: 10px;
    overflow: hidden;
  }
  .statistics-title{
    font-size: 16px;
    color: #00e8ff;
    font-weight: bolder;
  }
  .button-type{
    position: absolute;
    left: 50%;
    top: 13px;
    margin-left: -450px;
    >button{
      height: 26px;
      padding: 0 15px;
      border-radius: 3px;
      margin-right: 10px;
    }
    .button-bgy-line{
      width: 1px;
      height: 27px;
      margin: 0 10px 0 0;
      display: inline-block;
      background-image: url("/static/images/line-duan.png");
      background-repeat: no-repeat;
      background-position: 0 -5px;
      vertical-align: top;
    }
    .button-police{
      background: #e64747;
      border: none;
      color: #092232;
    }
    .button-warning{
      background: #ffc600;
      border: none;
      color: #092232;
    }
    .button-common{
      border: 1px #a8c5ed solid;
      background: none;
      color: #a8c5ed;
      cursor: pointer;
      &:hover{
        background: #34cddd;
        color: #fff;
      }
    }
    .button-all{
      background: #34cddd;
      border: none;
      color: #fff;
      cursor: pointer;
      &:hover{
        background: #22919d;
      }
    }
    .nodeColor{
      color: #e64747;
    }
    .nodeColorWarning{
      color: #ffc600;
    }
    .button-hover{
      background: #5f7188;
      color: #fff;
    }
  }
  .video-list{
    width: 100%;
    .video-list-left{
      width: 680px;
      height: 100%;
      margin-right: 10px;
      position: relative;
      >img{
        width: 100%;
        height: 100%;
      }
    }
    .video-control{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      background: rgba(0, 0, 0, 0.3);
    }
  }
  .video-list-p{
    text-align: center;
    font-size: 30px;
    i{
      font-size: 48px;
    }
  }
  .select-dowm{
    width: 15px;
    height: 15px;
    border: 1px #00e8ff solid;
    color: #00e8ff;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    position: absolute;
    right: 15px;
    top: 26px;
    i{
      font-size: 12px;
    }
  }
  .video-list-right{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 100%;
    .video-scroll{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.5);
      .video-scroll-move{
        z-index: 2;
        width: 100px;
        height: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 5px;
        cursor: pointer;
        background: rgba(71, 159, 205, 0.7);
      }
    }
   .video-list{
     width: 330px;
     display: inline-block;
     margin-right: 10px;
     .child-img{
       width: 100%;
       overflow: hidden;
       >img{
         width: 100%;
       }
     }
     .child-img-top{
       margin-top: 10px;
     }
   }
  }
  .video-marquee-left{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    cursor: pointer;
  }
  .video-marquee-bg{
    width: 30px;
    height: 100%;
    text-align: center;
    line-height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .video-icon{
    color: #fff;
    position: absolute;
    top: 45%;
    left: 10px;
  }
  .video-marquee-right{
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
  }
  .video-transition {
    transition: all .5s ease;
  }
</style>
